<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/dz.js"></script>
  <script>
    function $(id){
      return document.getElementById(id);
    }

    window.onload=function (){
      var str ="";
      province.forEach( n => {
        str+=`<option value="${n.provincCode}">${n.provinceName}</option>`
      });
      $("provinceSelect").innerHTML=str;
    }

    function selectChange(){
      var cityArray=city.filter(n=>n.ctCode==$("provinceSelect").value);
      var cit ="";
      cityArray.forEach(n=>{
        cit+=`<option >${n.cityName}</option>`
      });
      $('citySelect').innerHTML=cit;
    }


  </script>
</head>
<body>
<select name="province" id="provinceSelect" onchange="selectChange()">

</select>
<select name="city" id="citySelect">

</select>
</body>
</html>
